<template>
    <div class="dialog_recharge">
        <div class="title">{{ $t('my.充值地址') }}</div>
        <el-input v-model="wallet_address" readonly class="input_view">
            <i class="el-icon-copy-document el-input__icon" slot="suffix" :title="$t('my.复制')" @click="copy">
            </i>
        </el-input>
        <div class="title">{{ $t('my.充值凭证') }}</div>

        <div class="mall_upload">
            <el-upload class="avatar-uploader" :action="upload_url" :file-list="fileList" :limit="limit"
                list-type="picture-card" multiple accept=".jpg,.jpeg,.png,.gif,.bmp,.webp" :on-success="uploadSuccess"
                :on-remove="removeImage" :before-upload="uploadBefore" :on-exceed="exceedImage">
                <img src="@/assets/image/upload.png" class="mall_img">
            </el-upload>
        </div>
        <div class="submit" @click="submit">{{ $t('my.立即充值') }}</div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            upload_url: window.BASE_URL + 'common/upload',
            fileList: [],
            uploadedImages: [],
            limit: 9,

            wallet_address: ""
        }
    },
    async created() {
        let { wallet_address } = await this.$api.usersApi.recharge_config();
        this.wallet_address = wallet_address;
    },
    methods: {
        copy() {
            const el = document.createElement('textarea');
            el.value = this.wallet_address;
            el.setAttribute('readonly', '');
            el.style.position = 'absolute';
            el.style.left = '-9999px';
            document.body.appendChild(el);
            el.select();
            document.execCommand('copy');
            document.body.removeChild(el);
            this.$message({
                message: this.$t('my.链接已复制'),
                type: 'success'
            });
        },

        uploadSuccess(response, file, fileList) {
            this.uploadedImages.push({
                uid: file.uid,
                name: file.name,
                url: URL.createObjectURL(file.raw),
                response
            });
        },
        removeImage(file, fileList) {
            const index = this.uploadedImages.findIndex(img => img.uid === file.uid);
            if (index !== -1) this.uploadedImages.splice(index, 1);
        },
        exceedImage() {
            let msg = `${this.$t('mall.最多可上传')}:${this.limit}`
            this.$message.error(msg);
        },
        uploadBefore(file) {
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isLt2M) {
                this.$message.error(`${this.$t('最大')}2MB!`);
            }
            return isLt2M;
        },


        async submit() {
            let images = [];
            this.uploadedImages.forEach(img => {
                images.push(img.response.data.fullurl);
            });
            images = images.length ? images.join(',') : "";
            if (!images) {
                this.$message({
                    message: this.$t('my.请上传充值凭证'),
                    type: 'error'
                });
                return
            }
            await this.$api.usersApi.recharge_withdrawal({
                type: 1,
                images
            })

            this.$message({
                message: this.$t('my.充值申请已提交'),
                type: 'success'
            });
            this.$emit("ok")
        }
    }
}
</script>
<style lang="scss" scoped>
.dialog_recharge {

    .title {
        margin-bottom: 20px;
    }

    .input_view {
        margin-bottom: 20px;

        &:deep(.el-input__inner) {
            height: 52px;
        }

        background: #F5F5F5;
    }

    .mall_upload {
        width: 100%;
        display: flex;

        .mall_img {
            width: 78px;
            height: 78px;
            border-radius: 4px 4px 4px 4px;
        }

        &:deep(.el-upload--picture-card) {
            width: 80px;
            height: 80px;
            border-radius: 4px 4px 4px 4px;
        }

        &:deep(.el-upload-list--picture-card) {
            .el-upload-list__item {
                width: 80px;
                height: 80px;
                border-radius: 4px 4px 4px 4px;
            }
        }
    }

    .submit {
        width: 428px;
        height: 52px;
        line-height: 52px;
        text-align: center;
        font-weight: bold;
        font-size: 20px;
        color: #FFFFFF;
        background: linear-gradient(270deg, #4488FF 0%, #2BBCFF 100%);
        border-radius: 8px 8px 8px 8px;
        margin: 0 auto;
        margin-top: 48px;
        cursor: pointer;
    }
}
</style>